<template>
  <div class="mainDiv" ref='mainDiv'>

    <!-- <vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle" :particleSize="2"
      linesColor="#FFFFFF" :linesWidth="2" :lineLinked="false" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
      :hoverEffect="false" hoverMode="grab" :clickEffect="true" clickMode="push" class="cash">
    </vue-particles> -->
    <div class="header">
      <toplogo></toplogo>
    </div>
    <div class="mainCon">

      <div class="mainLeft">
        <div class="drylWrap">
          <dangriyunli class=""></dangriyunli>
        </div>
        <div class="kbWrap">
          <kaban></kaban>
        </div>
        <div class="hyWrap">
          <haiyun></haiyun>
        </div>
        <div class="dtywWrap">
          <dangtianyewu></dangtianyewu>
        </div>

      </div>



      <div class="mainCenter">
        <div class="dituWrap">
          <div class="diaodu">
              <div class="zb-title">
                运力监控
              </div>
              <div class="dd-item">
                <span class="name">航班</span>
                <span class="hbh">5C811</span>
                <span class="Yj">
                  预计(+1)
                  <i class="num">0</i>
                  <i class="num">5</i>
                  :
                  <i class="num">3</i>
                  <i class="num">0</i>
                  到达
                </span>
                <span class="jcname">郑州机场</span>
              </div>
              <div class="dd-item">
                <span class="name">编号</span>
                <span class="hbh">豫AYHB30</span>
                <span class="Yj">
                  预计(+1)
                  <i class="num">0</i>
                  <i class="num">1</i>
                  :
                  <i class="num">3</i>
                  <i class="num">0</i>
                   到达
                </span>
                <span class="jcname">列日</span>
              </div>
              <div class="dd-item">
                <span class="name">船舶编号</span>
                <span class="hbh">MLDTUNE2104ECOSCO</span>
                <span class="Yj">
                  预计&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <i class="num">1</i>
                  <i class="num">1</i>
                  :
                  <i class="num">0</i>
                  <i class="num">0</i>
                   到达
                </span>
                <span class="jcname">东京港</span>
              </div>
          </div>
          <div class="ditujs" style="display: none;">
            <div class="hangbanWrap">
              <div class="hangbanTit">
                <span>航班:</span>
                <div>
                  <span>已开通:<i class="num">4</i></span>
                  <span>即将开通:<i class="num">4</i></span>
                </div>
              </div>
              <div class="hangbanCon">
                <div class="hangbanConTit">
                  <span>起始地</span>
                  <span>目的地</span>
                  <span>状态</span>
                </div>
                <div class="swiper-container swiper-container4 hangbanConCon">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide hangbanCClist">
                      <span>LGG</span>
                      <span>CGO</span>
                      <span>已开通</span>
                    </div>
                   <div class="swiper-slide hangbanCClist">
                      <span>CGO</span>
                      <span>LGG</span>
                      <span>已开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>JFK</span>
                      <span>CGO</span>
                      <span>已开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>JFK</span>
                      <span>CGO</span>
                      <span>已开通</span>
                    </div>
                   <!-- <div class="swiper-slide hangbanCClist">
                      <span>LAX</span>
                      <span>CGO</span>
                      <span>已开通</span>
                    </div> -->
                   <!-- <div class="swiper-slide hangbanCClist">
                      <span>CGO</span>
                      <span>LAX</span>
                      <span>已开通</span>
                    </div> -->
                    <div class="swiper-slide hangbanCClist">
                      <span>CGO</span>
                      <span>AMS</span>
                      <span>即将开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>CGO</span>
                      <span>ORD</span>
                      <span>即将开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>CGO</span>
                      <span>BUD</span>
                      <span>即将开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>CGO</span>
                      <span>LHR</span>
                      <span>即将开通</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="hangbanWrap">
              <div class="hangbanTit">
                <span>卡班:</span>
                <div>
                  <span>已开通:<i class="num">3</i></span>
                  <span>即将开通:<i class="num">1</i></span>
                </div>
              </div>
              <div class="hangbanCon">
                <div class="hangbanConTit">
                  <span>起始地</span>
                  <span>目的地</span>
                  <span>状态</span>
                </div>
                <div class="swiper-container swiper-container4 hangbanConCon">
                  <div class="swiper-wrapper">

                    <div class="swiper-slide hangbanCClist">
                      <span>上海 </span>
                      <span>杜尚别</span>
                      <span>已开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span> 成都	 </span>
                      <span>列日</span>
                      <span>已开通</span>
                    </div>

                    <div class="swiper-slide hangbanCClist">
                      <span>南宁	 </span>
                      <span>列日</span>
                      <span>已开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>银川</span>
                      <span>俄罗斯</span>
                      <span>即将开通</span>
                    </div>

                  </div>
                </div>
              </div>
            </div>

            <div class="hangbanWrap">
              <div class="hangbanTit">
                <span>轮船:</span>
                <div>
                  <span>已开通:<i class="num">2</i></span>
                  <span>即将开通:<i class="num">3</i></span>
                </div>
              </div>
              <div class="hangbanCon">
                <div class="hangbanConTit">
                  <span>起始地</span>
                  <span>目的地</span>
                  <span>状态</span>
                </div>
                <div class="swiper-container swiper-container4 hangbanConCon">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide hangbanCClist">
                      <span>青岛港 </span>
                      <span>东京港</span>
                      <span>已开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>青岛港 </span>
                      <span>新加坡港</span>
                      <span>已开通</span>
                    </div>

                    <div class="swiper-slide hangbanCClist">
                      <span>青岛港 </span>
                      <span>马赛港</span>
                      <span>即将开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>青岛港 </span>
                      <span>悉尼港</span>
                      <span>即将开通</span>
                    </div>
                    <div class="swiper-slide hangbanCClist">
                      <span>青岛港 </span>
                      <span>洛杉矶港</span>
                      <span>即将开通</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <ditu></ditu>
        </div>
        <div class="ywlmyeWrap">
          <yewuliangmaoyie></yewuliangmaoyie>
        </div>

      </div>

      <div class="mainRight">
        <div class="kouhao">
          <img src="../../../static/img/kouhao.png" alt="">
        </div>
        <div class="yktWrap">
          <yikaitong></yikaitong>
        </div>
        <div class="jsWrap">
          <!--<jieshao></jieshao>-->
          <yuanqupaiming></yuanqupaiming>
        </div>
        <div class="zbAndYtWrap">
          <gongxiandu></gongxiandu>
          <!--
          <div class="zbWrap">
            <zhanbi></zhanbi>
          </div>
          <div class="ytWrap">
            <yuntu></yuntu>
          </div>
          -->
        </div>





      </div>
    </div>
  </div>

</template>


<script>
  import dangriyunli from '@/views/bigScreen/cgl0317/dangriyunli'
  import kaban from '@/views/bigScreen/cgl0317/kaban'
  import haiyun from '@/views/bigScreen/cgl0317/haiyun'
  import dangtianyewu from '@/views/bigScreen/cgl0317/dangtianyewu'
  import ditu from '@/views/bigScreen/cgl0317/ditu'
  import yewuliangmaoyie from '@/views/bigScreen/cgl0317/yewuliangmaoyie'
  import yikaitong from '@/views/bigScreen/cgl0317/yikaitong'
  //import jieshao from '@/views/bigScreen/cgl0317/jieshao'
  import yuanqupaiming from '@/views/bigScreen/cgl0317/yuanqupaiming'
  import zhanbi from '@/views/bigScreen/cgl0317/zhanbi'
  import gongxiandu from '@/views/bigScreen/cgl0317/gongxiandu'
  import yuntu from '@/views/bigScreen/cgl0317/yuntu'
  import toplogo from '@/views/bigScreen/cgl0317/toplogo'

  export default {
    name: 'bigScreen',
    components: {
      dangriyunli,
      kaban,
      haiyun,
      dangtianyewu,
      ditu,
      yewuliangmaoyie,
      yikaitong,
      yuanqupaiming,
      zhanbi,
      yuntu,
      toplogo,
      gongxiandu
    },

    data() {
      return {


      }
    },
    mounted() {
      let swiper3 = new Swiper('.swiper-container4', {
        direction: 'vertical',
        slidesPerView: 3,
        //循环播放
        loop: true,
        // 自动播放时间
        autoplay: true,
        // 播放的速度
        speed: 2000,
      });

      var that = this;

      setInterval(function() {
        // 总累计 当年累计 当天累计定时切换
        that.numTabChange++
        if (that.numTabChange > 2) {
          that.numTabChange = 1
        }
        //that.getCumulativdData();
      }, 20000)

    },
    methods: {


    }
  }
</script>

<style scoped>
  .mainDiv {
    height: 100vh;
    width: 100vw;
    /* background: url(../../assets/img/bigScreen_bg.png) left top no-repeat; */
    /* background-size: 100% 100%;

    background: -moz-linear-gradient(top, #013162 0%, #021854 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #013162), color-stop(100%, #021854));
    background: -webkit-linear-gradient(top, #013162 0%, #021854 100%);
    background: -o-linear-gradient(top, #013162 0%, #021854 100%);
    background: -ms-linear-gradient(top, #013162 0%, #021854 100%);
    background: linear-gradient(to bottom, #013162 0%, #021854 100%);
    */
    /* background: #011337; */

    /* min-width: 24rem; */
    min-width: 19.2rem;

    /* min-width: 10.24rem; */
    box-sizing: border-box;
    background: #060036 url(../../../static/img/cglbg.png) center top no-repeat;
    background-size: 100% 115%;



  }

  .cash {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .mainCon {
    height: 88%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .header {
    width: 100%;
    height: 0.72rem;
  }

  .mainLeft {
    width: 24.27%;
    height: 100%;
    padding-right: .5%;

  }

  .drylWrap {
    height: 25%;
    width: 100%;
  }

  .mainCon {}

  .kbWrap {
    height: 20%;
    width: 100%;
    margin-top: 2%;
  }

  .hyWrap {
    height: 25%;
    width: 100%;
    margin-top: 2%;
  }

  .dtywWrap {
    height: 28%;
    width: 100%;
    margin-top: 2%;
  }

  .mainCenter {
    width: 45.208%;
    height: 100%;
    /* padding-left: .2rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
  }

  .dituWrap {
    width: 100%;
    flex: 1;
    max-width: 868px;
    max-height: 577px;
    /*transform-origin: center center;
    transform: scaleX(0.8);
    margin:0 auto;*/
    margin-top: 8%;
    /*  background:url(../../../static/img/dixia.png) no-repeat center bottom;*/
    background-size: 100% auto;
    position: relative;
  }

  .ditujs {
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: auto;
  }
  .diaodu {
    position: absolute;
    left: 0;
    top: -10%;
    width: 45%;
    height: auto;
    display: block;
  }
  .diaodu .zb-title{
    height: .3rem;
    width: 100%;
    background: url(../../../static/img/dangriyunli.png) no-repeat;
    /* background-size: 50% 80%; */
    line-height: .3rem;
    font-size: .16rem;
    color: #fff;
    padding: 0 .1rem;
    letter-spacing: 1px;
    /* margin-bottom: .2rem; */
  }
.dd-item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  color:#5ba8d9;
  align-items: center;
}
.dd-item span{
  padding:0.05rem 0;
}
.dd-item .name{
  width:9%;
  font-size: .12rem;
  text-align: center;
}
.dd-item .hbh{
   width:30%;
  font-size: .12rem;
  padding:0 .01rem;
  font-weight: bold;
  text-align: center;
  word-break: break-all;
}
.dd-item .Yj{
   width:42%;
  font-size: .12rem;
  padding:0 .01rem;
  font-weight: bold;
  text-align: center;
}
.dd-item .Yj .num{
  background:#0c52e4;
  color:#fff;
  font-size:.14rem;
  padding:0.02rem 0.03rem;
}
.dd-item .jcname{
  width:20%;
  font-weight: bold;
  font-size:.14rem;
  text-align: center;

}
  .hangbanWrap {
    width: 100%;
    height: 100%;
    font-size: .12rem;
    color: #4077aa;
  }

  .hangbanTit {
    height: .3rem;
    display: flex;
    align-items: center;
    margin-bottom: .05rem;
  }

  .hangbanTit>span {
    font-size: .16rem;
  }

  .hangbanTit>div {
    display: flex;
    align-items: center;
    margin-left: .1rem;
  }

  .hangbanTit>div>span:nth-of-type(1) {
    color: #ed2065;
  }

  .hangbanTit>div>span:nth-of-type(2) {
    color: #19b76c;
    margin-left: .1rem;
  }

  .hangbanTit>div>span>.num {
    color: #fff;
    margin-left: .1rem;
    font-size: .16rem;
  }

  .hangbanConCon {
    height: .6rem;
    /* width: 80%; */
  }
.hangbanCon{
  width: 80%;
}
  .hangbanConTit,
  .hangbanCClist {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hangbanConTit {
    margin-bottom: .05rem;
  }

  .hangbanConTit>span {
    font-size: .14rem;
    width: 33.3%;
    line-height: .2rem;
    /* text-align: center; */
  }

  .hangbanCClist>span {
    width: 33.3%;
    line-height: .14rem;
  }

  .ywlmyeWrap {
    height: 26%;
    width: 100%;
    display: block;
    margin-top: 4%;
  }

  .mainRight {
    width: 26.104%;
    height: 100%;
    padding-left: .5%;
  }

  .kouhao {
    height: 8%;
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
  }

  .yktWrap {
    height: 30%;
    width: 100%;
    display: block;
    margin-top: 0;
  }

  .jsWrap {
    height: 32%;
    width: 100%;
    display: block;
    margin-top: 1%;
  }

  .zbAndYtWrap {
    height: 25%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 4%;
    padding-top: .08rem;
  }

  .zbWrap {
    width: 54%;
    display: block;
  }

  .ytWrap {
    width: 44%;

    display: block;
  }


  .hide {
    display: none;
  }
</style>
